<template>
	<div class="flex flex-1 flex-col">
		<div class="flex-1">
			<!--		<div class="flex-1 overflow-hidden">-->
			<wallet-deposit-types
				ref="walletDepositChannelRef"
				:data-list="dataList"
				@select="selectType" />
			<wallet-deposit-channel
				ref="depositChannelRef"
				:current-type="currentType"
				:channel-list="channelList"
				@select="selectChannel" />
			<div class="px-[35px]">
				<template v-if="selectedItem.name">
					<div class="mt-[10px] text-t-1 mb-2">{{ bankTitle }}</div>
					<wallet-select-bank
						v-model:modelValue="bankValue"
						:options="bankList"
						:ableDeleted="false" />
				</template>
				<wallet-deposit-activity ref="rechargeActivityRef"></wallet-deposit-activity>
			</div>
		</div>
		<div class="w-full px-[35px] pb-[40px]">
			<div class="text-t-2 items-center text-center">
				<span class="mr-[3px]">
					{{ t('wallet.selected') }}
				</span>
				<span>{{ payPathString }}</span>
			</div>
			<wallet-course
				style="margin-top: 10px"
				:tell-msg="tellMsg"
				:currency-type="currencyType"
				:wallet-type="0" />
			<base-button type="primary" @click="next" :disabled="!disabledButton" class="w-full mx-auto">
				{{ $t('wallet.nextStep') }}
			</base-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, nextTick, onMounted, ref } from 'vue'
import { WalletDepositType } from '@/enums'
import { t } from '@/utils'
import { useWalletStore } from '@/store'
import { BaseButton } from '@/components/base'
import WalletCourse from '@/views/wallet/components/wallet-course.vue'
import WalletDepositChannel from './wallet-deposit-channel.vue'
import WalletDepositTypes from '@/views/wallet/wallet/wallet-deposit-types.vue'
import WalletSelectBank from '@/views/wallet/components/wallet-select-bank.vue'
import WalletDepositActivity from './wallet-deposit-activity.vue'
import { activitiesType } from '@/components/base/list/type.ts'

const walletStore = useWalletStore()

const walletDepositChannelRef: any = ref(null)
const depositChannelRef: any = ref(null)
const currentType = ref('')
const currentMethod = ref('')
const channelList = ref([])
const bankList = ref<{ [bankValue: string | number]: object }[]>([])

const selectedItem: any = ref({})
const currentChannelName = ref('')
const merchantCode = ref('')
const bankValue: any = ref('')
const rechargeActivityRef = ref<activitiesType>()

const disabledButton = computed(
	() =>
		selectedItem.value ||
		(walletStore.channelInfo.channelList.length > 1 &&
			String(bankValue.value) &&
			Boolean(String(selectedItem.value.name)))
)

const dataList: any = computed(() => walletStore.channelInfo.channelList)
const bankTitle = computed(() => {
	if (currentType.value === WalletDepositType.ewallet.id) {
		return t('wallet.eWalletChannel')
	}
	return t('wallet.cardBank')
})
const payPaths = computed(() => {
	const paths = [currentMethod.value, currentChannelName.value]
	if (selectedItem.value.name) {
		paths.push(selectedItem.value.name)
	}
	return paths
})
const payPathString = computed(() => payPaths.value.join(' > '))
const tellMsg = computed(() => walletStore.channelInfo?.tellMsg)
const currencyType = computed(() => {
	return currentType.value === WalletDepositType.crypto.id ? 'crypto' : 'flat'
})

const selectType = ({ type, paymentMethod, list }: any) => {
	currentType.value = type
	currentMethod.value = paymentMethod
	channelList.value = list
	nextTick(() => {
		depositChannelRef.value.selectRechargeChannel(channelList.value[0], 0)
	})
}

const selectChannel = (channel: any) => {
	currentChannelName.value = channel.name
	merchantCode.value = channel.merchantCode
	if (channel.list) {
		walletStore.setDepositBankPaymentList(channel.list)
		bankList.value = channel.list.map((item: any, index: number) => ({
			id: index,
			text: item.name,
			img: item.icon,
			code: item.code,
			type: 'server'
		}))
		selectedItem.value = channel.list[0]
		bankValue.value = bankList.value[0]?.id
	} else {
		selectedItem.value = {}
		bankList.value = []
	}
}

const next = async () => {
	const data: any = { currentType: currentType.value }
	if (currentType.value.toLowerCase() !== WalletDepositType.crypto.id.toLowerCase()) {
		data.merchantCode = merchantCode.value
		data.bankCode = bankList.value[bankValue.value as number]?.code || selectedItem.value.code
		data.payPaths = payPaths.value
	} else {
		data.cryptoType = currentMethod.value
		data.cryptoCode = currentChannelName.value
	}
	if (!data.bankCode) {
		walletStore.setDepositBankPaymentList([])
	}
	walletStore.setDepositData(data)
	walletStore.depositData.selectedBank = bankList.value[bankValue.value as number]
	rechargeActivityRef.value?.setActivities()
	walletStore.setWalletDepositNextPopupShow(true)
}

onMounted(() => {
	nextTick(() => {
		walletDepositChannelRef.value.selectRechargeType(dataList.value[0], 0)
	})
})
</script>
<style lang="scss" scoped />
